<template>
  <a-drawer
    :width="600"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    title="金融产品设置"
    class="form-drawer"
  >
    <a-form-model
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form-model"
    >
      <a-form-model-item label="产品名称：" prop="name">
        <a-input v-model="ruleForm.name" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="融资额度（元）：" prop="financingLimit">
        <a-input v-model="ruleForm.financingLimit" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="投资期限（元）：" prop="investTimeLimit">
        <a-select v-model="ruleForm.investTimeLimit" placeholder="请输入" disabled>
          <a-select-option v-for="i in 12" :key="i" :value="i">
            {{ i + '年' }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="预期收益率（%）：" prop="yieldRate">
        <a-input
          v-model="ruleForm.yieldRate"
          placeholder="请输入"
          allow-clear
          type="number"
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="投资门槛（元）：" prop="investThreshold">
        <a-input
          v-model="ruleForm.investThreshold"
          placeholder="请输入"
          allow-clear
          type="number"
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="产品介绍：" prop="introduce">
        <a-textarea
          v-model="ruleForm.introduce"
          placeholder="请输入"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          allow-clear
        />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 3 }">
        <a-button type="primary" @click="menuSubmit" :loading="submitLoading">保存</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { formProductAdd, getProductInfo } from '@/api/invest'
export default {
  name: 'financeForm',
  data() {
    return {
      visible: false,
      ruleForm: {
        investTimeLimit: 2,
        name: '',
        financingLimit: '',
        yieldRate: '',
        investThreshold: '',
        introduce: ''
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      rules: {
        name: [{ required: true, message: '产品名称不能为空' }],
        financingLimit: [{ required: true, message: '融资额度不能为空' }],
        investThreshold: [{ required: true, message: '投资门槛不能为空' }],
        yieldRate: [{ required: true, message: '预期收益率不能为空' }],
        investTimeLimit: [{ required: true, message: '投资期限不能为空' }]
      },
      parentList: [],
      submitLoading: false
    }
  },
  methods: {
    open(record = {}) {
      if (record.id) {
        getProductInfo(record.id).then((res) => {
          this.ruleForm = res.data
          this.visible = true
        })
      } else {
        this.visible = true
        setTimeout(() => {
          this.ruleForm = {
            investTimeLimit: 2,
            name: '',
            financingLimit: '',
            yieldRate: '',
            investThreshold: '',
            introduce: ''
          }
          this.$refs.ruleForm.resetFields()
        }, 100)
      }
    },
    onClose() {
      this.visible = false
    },
    afterVisibleChange(val) {
      if (!val) {
        this.ruleForm = {
          name: '',
          financingLimit: '',
          investTimeLimit: '',
          investThreshold: '',
          introduce: '',
          yieldRate: ''
        }
      }
    },
    getInfo(id) {},
    menuSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          formProductAdd(this.ruleForm)
            .then((res) => {
              this.$notification['success']({
                message: '提示',
                description: `${this.ruleForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    }
  },
  components: {}
}
</script>

<style></style>
